<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../css/reset.css">
	
	<style>
		.search-wrap{
			display: flex;
			flex-wrap: wrap;
			font-size: 18px;
			border-bottom: 1px solid #c0c0c0;
		}
		.search-wrap div:not(.btn){
			width: 25%;
			margin-bottom: 10px;
		}
		.search-wrap div>span{
			display: inline-block;
			width: 50px;
			text-align: right;
		}
		.search-wrap div>select{
			width: 200px;
		}
		.search-wrap select{
			font-size: 14px;
		}
		.table{
			margin-top: 20px;
		}
		.table thead tr th{
			font-size: 16px;
			font-weight: 900;
		}
		#tbody{
			font-size: 14px;
		}
		#tbody tr{
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #e9e8e8;
		}
	</style>
</head>
<body>
	<div class="search-wrap">
		<div>
			<span>省份</span>
			<select name="" id="sheng" onchange="shengChange()">
				<option value="">请选择</option>
			</select>
		</div>
		<div><span>市</span>
			<select name="" id="shi" onchange="shiChange()">
				<option value="">请选择</option></select>
		</div>
		<div><span>县</span>
			<select name="" id="xian" onchange="xianCheng()">
				<option value="">请选择</option></select>
		</div>
		<div><span>乡(镇)</span>
			<select name="" id="zhen">
				<option value="">请选择</option>
			</select>
		</div>
		<div><span>品牌</span>
			<select name="" id="">
				<option value=""></option>
				<option value=""></option>
			</select>
		</div>
		<div><span>型号</span>
			<select name="" id="">
				<option value=""></option>
				<option value=""></option>
			</select>
		</div>
		<div><span>颜色</span>
			<select name="" id="">
				<option value=""></option>
				<option value=""></option>
			</select>
		</div>
		<div><span>配送</span>
			<select name="" id="">
				<option value="1">自提</option>
				<option value="2">可送</option>
				<option value="3">快递</option>
			</select>
		</div>
		<div class="btn" style="width: 90%;text-align: right;">
			<button style="width: 100px;height: 40px;line-height: 40px;margin-bottom: 10px;">查询</button>
		</div>
	</div>
	<div class="table">
		<table width="100%">
			<thead>
				<tr>
					<th>品牌</th>
					<th>型号</th>
					<th>颜色</th>
					<th>内存</th>
					<th>正常开机</th>
					<th>可注销账户</th>
					<th>有过拆卸</th>
					<th>配送</th>
					<th>当前价格</th>
					<th>操作</th>
					
				</tr>
			</thead>
			<tbody id="tbody">
				<tr align="center">
					<td>小米</td>
					<td>红米12</td>
					<td>红色</td>
					<td>256</td>
					<td>是</td>
					<td>是</td>
					<td>否</td>
					<td>快递</td>
					<td>30</td>
					<td>
						<a href="*">出价</a>
						<a href="*">详情</a>
						<a href="*">沟通</a>
						<a href="*">投诉</a>
					</td>
				</tr>	
			</tbody>
		</table>
	</div>
	<script src="../../public1/js/shengshixianxiang.js"></script>
	<script>

		function getIdEl(id){
			return document.getElementById(id)
		}
		var sheng = getIdEl('sheng'),shi = getIdEl('shi'),xian = getIdEl('xian'),zhen = getIdEl('zhen')
		initOption(sheng,data)
		function initOption(wrap,target){
			for(var i=0;i<target.length;i++){
				wrap.innerHTML += `<option value=${target[i].code}>${target[i].name}</option>`
			}
		}
		
		function shengChange(){
			empty1()
				var shengV = sheng.value
				var shis = data.filter(function(item){return item.code == shengV})
				initOption(shi,shis[0].children)
		}
		function shiChange(){
			empty2()
			var shiV = shi.value
			var shis = data.filter(function(item){return item.code == sheng.value})
			if(shis.length){
				var shis = shis[0].children.filter(function(item){return item.code == shiV})
				initOption(xian,shis[0].children)
			}
		}
		function xianCheng(){
			empty3()
			var shis = data.filter(function(item){return item.code == sheng.value})
			if(shis.length){
				var shisC = shis[0].children.filter(function(item){return item.code == shi.value})
				if(shisC.length){
					var zhenC = shisC[0].children.filter(function(item){return item.code == xian.value})
					initOption(zhen,zhenC[0].children)
				}
			}
		}
		function empty1(){
			shi.innerHTML = '<option value="">请选择</option>'
			shi.value = ''
			empty2()
		}
		function empty2(){
			xian.innerHTML = '<option value="">请选择</option>'
			xian.value = ''
			empty3()
		}
		function empty3(){
			zhen.innerHTML = '<option value="">请选择</option>'
			zhen.value = ''
		}
	</script>
</body>
</html>